<template>
	<view>
		<navTopIndexTT title="我的" :scrollTopNum="scrollTopNum"></navTopIndexTT>
		
		<view class="top-box" :style="{
				height: `calc( 
					${ 
						(isConfigSsVip || isSsVip) ? 
						(isIos && iosPaySwitch) ? 
						'568rpx' : !isIos ? 
						'548rpx' : '408rpx' : '408rpx' } - ${statusBarHeight}px
				)`
			}">
			<view class="bg-box" :style="{
				top: `calc(-${statusBarHeight}px - 94rpx)`
			}"></view>
			<view class="content-box">
				<view @click="postLogin" class="flex align-center">
					<image
						class="userImg text-xl"
						:src="isLogin && userInfo && userInfo.headerImage ? userInfo.headerImage : 'https://res.qiguoread.com/staticResources/fellow_townsman/image/icon_mr_tx.png'"
					></image>
					<view>
						<view  class="loginText">{{ isLogin ? userInfo.nickName : '登陆' }}</view>
						<view v-if="isLogin" class="isId text-gray text-df margin-top-xs">用户ID：{{ userInfo && userInfo.productUserId ? userInfo.productUserId : '' }}</view>
					</view>
				</view>
				<view class="pay-mess-box flex justify-between align-center">
					<view class="flex align-center justify-between flex-sub">
						<view class="flex flex-direction align-center item-box flex-sub" @tap="handlePocketPage">
							<view class="color-gold">
								<text class="text-xl text-bold margin-right-xs">
									<!-- {{ balance | fruitNum10 }} -->
									{{ balance }}
								</text>枚
							</view>
							<text class="color-gold">我的{{moneyName}}</text>
						</view>
						<text class="border-right"></text>
						<view class="flex flex-direction align-center item-box flex-sub">
							<view class="color-black">
								<text class="text-xl text-bold margin-right-xs">0</text>张
							</view>
							<text class="color-black">我的卡包</text>
						</view>
					</view>
					<view v-if="isLogin && (!isIos || iosPaySwitch) && !isSsVip" @click="showCz" class="czBox">
						<view class="czText">充值{{moneyName}}</view>
					</view>
				</view>
				<template v-if="(isConfigSsVip || isSsVip) && (!isIos || iosPaySwitch )">
					<view v-if="!isSsVip" class="ssVip-box">
						<image class="bg-box" src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/toutiao/member_img2.png" />
						<view class="content-box flex justify-between align-center">
							<view class="flex flex-direction">
								<text class="text-box1">开通VIP会员</text>
								<text class="text-box2">低至1元/天，365/年全站免费观看</text>
							</view>
							<text class="btn-set" @click="handleSubmitOrder">立即开通</text>
						</view>
					</view>
					<view v-else class="ssVip-box">
						<image class="bg-box" src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/toutiao/member_img1.png" />
						<view class="content-box flex justify-between align-center">
							<view class="flex flex-direction">
								<text class="text-box1 text-gold-set">尊贵的超级VIP</text>
								<text class="text-box2 text-gold-set">您的会员将于 {{ timeFormatNew(ssVipMessExpirationTime) }} 到期</text>
							</view>
						</view>
					</view>
				</template>
			</view>
		</view>

		
	</view>
	
	<!-- <view class="topBox">
		<view v-if="isLogin && !isIos" @click="showCz" class="czBox">
			<image style="width: 38rpx;height: 38rpx;margin-right: 5rpx;" src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/toutiao/icon_kb.png"></image>
			<view class="czText">充值{{moneyName}}</view>
		</view>
		<view v-if="isLogin" class="isId">用户ID：{{ userInfo && userInfo.productUserId ? userInfo.productUserId : '' }}</view>
		<image @click="toSetPage" class="isSet" src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/toutiao/icon_set.png"></image>
		<image
			@click="postLogin"
			class="userImg"
			:src="isLogin && userInfo && userInfo.headerImage ? userInfo.headerImage : 'https://res.qiguoread.com/staticResources/fellow_townsman/image/icon_mr_tx.png'"
		></image>
		<view @click="postLogin" class="loginText">{{ isLogin ? userInfo.nickName : '登陆' }}</view>
		<view class="buttonBox">
			<view class="btnItem">我的{{moneyName}}：{{ balance | fruitNum10 }}枚</view>
			<view class="btnItem">我的卡包：0张</view>
		</view>
	</view> -->
</template>

<script>
const util = require('@/util/util.js');
// 抖音配置
let ttConfig = require("../../../util/ttConfigSet.js");
import { getOrderTtMess, intoPayPage, getLittleAppNowObj } from '@/util/ttPay'
export default {
	props: {
		isLogin: {
			default: false,
			type: Boolean
		},
		balance: {
			default: 0,
			type: Number
		},
		userInfo: {
			default: () => {
				return {};
			},
			type: Object
		}
	},
	data() {
		return {
			statusBarHeight: uni.getSystemInfoSync()['statusBarHeight'] || 20,
			moneyName:this.moneyName,
			isIos: getApp().globalData.isIos,
			iosPaySwitch: false,
			isConfigSsVip: getApp().globalData.isConfigSsVip,
			ssVipMessExpirationTime: getApp().globalData.ssVipMessExpirationTime,
			isSsVip: false,
			copyGroupLink: '',
			copyLinkStatus: '',
			versionView: false,
			nowAppName: '',
			imId: ''
		};
	},
	methods: {
		async getCopyLink() {
			try {
				let res = await this.getConfigDouyin()
				this.copyGroupLink = res.copyGroupLink
				this.copyLinkStatus = res.copyLinkStatus
			} catch (error) {
				console.log(error)
			}
		},
		// 会员订单提交
		handleSubmitOrder: util.throttle(async function() {
			try {
				uni.showLoading({
					title: '加载中'
				})
				// 获取ssVip会员信息
				let memberInfoSsVip = uni.getStorageSync('memberInfoSsVip')
				let {
					packageId 
				} = memberInfoSsVip
				console.log(memberInfoSsVip)
				let configMess = await getApp().getMemberMess(this, packageId)

				console.log(configMess)
				// 模板提交
				let temObj = {
					packageId: packageId,
					moneyFen:  configMess[0] ? configMess[0].nowMoneyFen : 36500
				}

				if (this.versionView) {
					temObj.iosPayVersion = true
				} else {
					temObj.iosPayVersion = false
				}

				let resDataSub = await getApp().subMemberOrder(this, temObj)
				if(resDataSub && resDataSub.touTiaoGeneralPayApi) { // 通用支付
					this.payMessSsVipNew(resDataSub)
				} else {
					let {
						touTiaoApi,
						orderId
					} = resDataSub

					let orderInfo = {
						order_id: touTiaoApi.orderId,
						order_token: touTiaoApi.orderToken
					}
					// 头条支付
					await getApp().ttPaySub(orderInfo)

					// 支付完成上报
					let orderMess = await getApp().czSucc(this, orderId)

					console.log('-----121212--------', orderMess)
					if (orderMess && orderMess.payStatus == 'BE_READY') {
						if(this.copyLinkStatus && this.copyGroupLink) {
							this.copyWatchword(this.copyGroupLink)
						}
						// 更新会员状态
						this.memberStatusUpdate()
					}
				}
			} catch (error) {
				console.log(error)
			} finally {
				uni.hideLoading()
			}
		}, 2000),
		// 通用支付365
		async payMessSsVipNew(res) {
			if(!['Douyin', 'douyin', 'devtools'].includes(this.nowAppName) && this.versionView) {
				uni.showToast({
					title: 'ios设备暂不支持此功能',
					icon: 'none'
				})
				return
			}
			// 咱们内部的OrderID
			let {
				orderId,
				touTiaoGeneralPayApi
			} = res
			let orderMessNew = await getOrderTtMess(touTiaoGeneralPayApi)
			if(orderMessNew) {
				// 抖音订单的OrderId
				let objPayView = {
					...orderMessNew
				}
				if(this.versionView) {
					objPayView.imId = this.imId
				} else {
					delete objPayView.imId
				}
				await intoPayPage(objPayView)
				// 同步跳转更新
				if(this.versionView) {
					uni.setStorageSync('imJump', this.imType)
					uni.setStorageSync('imJumpNewObj', {
						orderId: orderId
					})
				} else {
					// 咱们内部的OrderID
					getApp().czSucc(this, orderId)
				}
			}
		},
		async memberStatusUpdate() {
			console.log('-----365充值成功-----')
			await getApp().getMemberTt(this)
			this.isConfigSsVip = getApp().globalData.isConfigSsVip
			this.ssVipMessExpirationTime = getApp().globalData.ssVipMessExpirationTime
			this.isSsVip = getApp().checkMemberSsVip()
		},
		copyWatchword(val) {
			uni.setClipboardData({
				data: val,
				success: function() {}
			});
		},
		timeFormatNew(val) {
			return val ? util.dateFormat(val) : '未知'
		},
		postLogin: util.throttle(async function() {
			if (!this.isLogin){
				uni.getUserProfile({
					success: res => {
						console.log('getUserProfile 调用成功：', res.userInfo);
						this.$emit('updateInfo',res.userInfo.nickName, res.userInfo.avatarUrl);
					},
					fail: res => {
						console.log('getUserProfile 调用失败', res);
					}
				});
			}
		}, 2000),
		showCz() {
			this.$emit('showCz');
		},
		toSetPage() {
			uni.navigateTo({
				url: '../setPage/setPage'
			});
		},
		handlePocketPage() {
			uni.navigateTo({
				url:'../pay_page/pay_page'
			})
		}
	},
	onReady() {},
	async created() {
		let messConfig = await getLittleAppNowObj()
		let nowVerSion = messConfig.version
		this.nowAppName = messConfig.appName
		let isIos = getApp().globalData.isIos
		let versionList = [
			'22.2.1', '22.2.2', '22.2.3', '22.2.4', '22.2.0', '22.3.0', '22.3.1', '22.3.2', '22.4.0', '22.4.1', '22.4.2', '22.4.3', '22.5.0', '22.5.1', '22.5.2'
		]
		let nowVerSionArr = nowVerSion.split('.')
		//  剧多多配合测试的判断限制非抖音端支付
		if (isIos && (versionList.includes(nowVerSion) || (+nowVerSionArr[1] > 2 && +nowVerSionArr[0] > 21) || +nowVerSionArr[0] > 22 || nowVerSion === '6.6.3')) {
			this.versionView = true
		} else {
			this.versionView = false
		}
		//#ifdef MP-TOUTIAO
		// 获取配置信息
		let ttAccountInfo = tt.getEnvInfoSync() && tt.getEnvInfoSync().microapp
		if (ttAccountInfo && ttAccountInfo.appId) {
			let ttConfigMess = ttConfig[ttAccountInfo.appId]
			this.imId = ttConfigMess.imId
		}
		//#endif


		this.getCopyLink()
		let messVip = uni.getStorageSync('memberInfoSsVip')
		this.isConfigSsVip = getApp().globalData.isConfigSsVip
		this.ssVipMessExpirationTime = messVip ? messVip.expirationTime : ''
		console.log()
		console.log('this.ssVipMessExpirationTime-------------', getApp().globalData.ssVipMessExpirationTime)
		if(this.ssVipMessExpirationTime) {
			this.isSsVip = getApp().checkMemberSsVip()
		}

		setTimeout(async () => {
			// 获取IOS支付开关
			let resConfig = await this.getConfigDouyin();
			if(resConfig) {
				this.iosPaySwitch = resConfig.isIOSPayTt
			}
		}, 0)
	}
};
</script>

<style lang="scss" scoped>
.top-box {
	position: relative;
	height: 408rpx;
	.bg-box {
		width: 100vw;
		height: 508rpx;
		background: url('https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/toutiao/center_bg.png') no-repeat center center;
		background-size: 100% 100%;
		position: absolute;
		left: 0;
		top: 0;
	}
}
.content-box {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	padding: 24rpx 35rpx 0;
	color: #000000;
	font-size: 34rpx;
	z-index: 1;
	.userImg {
		width: 101rpx;
		height: 101rpx;
		display: table-cell;
		border-radius: 50%;
		margin-right: 26rpx;
	}

	.loginText {
		font-size: 34rpx;
		font-weight: 600;
	}

	.pay-mess-box {
		width: 680rpx;
		height: 136rpx;
		background: url('https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/toutiao/center_key.png') no-repeat center center;
		background-size: 100% 100%;
		margin-top: 42rpx;
		.item-box {
			margin: 0 28rpx;
			font-size: 26rpx;
		}
		.border-right {
			border-right: 1rpx solid #E2D9D7;
			height: 39rpx;
		}

		.czBox {
			width: 220rpx;
			height: 60rpx;
			background: linear-gradient(136deg, #FCDD7E 0%, #FFE7A6 48%, #F9CD5E 100%);
			box-shadow: 0px 1px 2px 0px rgba(195,157,157,0.27);
			border-radius: 30rpx;
			color: #864700;
			font-size: 26rpx;
			font-weight: bold;
			display: flex;
			line-height: 60rpx;
			justify-content: center;
			margin-right: 36rpx;
		}
	}

	.color-gold {
		color: #864700;
	}
}

.ssVip-box {
	position: relative;
	width: 672rpx;
	height: 129rpx;
	margin: 30rpx auto;
	.bg-box {
		width: 672rpx;
		height: 129rpx;
		display: table-cell;
	}
	.content-box {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		padding: 23rpx 32rpx 23rpx 53rpx;
		.text-box1 {
			line-height: 45rpx;
			font-size: 32rpx;
			font-weight: 600;
			margin-bottom: 3rpx;
			color: #515659;
		}
		.text-box2 {
			line-height: 37rpx;
			font-size: 26rpx;
			font-weight: 400;
			margin-bottom: 3rpx;
			color: #515659;
		}

		.btn-set {
			padding: 0 23rpx;
			height: 51rpx;
			line-height: 51rpx;
			text-align: center;
			border-radius: 26rpx;
			background: #515659;
			color: #C4C7C8;
			font-size: 27rpx;
		}
	}
}

.text-gold-set {
	color: #3B2111 !important;
}
</style>
